<template>
	<view class="container">
		<!-- 顶部导航栏 -->
		<view class="header">
			<x-status-bar></x-status-bar>
			<view class="flex-center-between header-navbar">
				<x-back-btn></x-back-btn>
				<view class="u-f-40 common-title">{{ lang_goods.goodsDetail }}</view>
				<view></view>
			</view>
		</view>

		<mescroll-body :height="`calc(100vh - 98rpx - var(--status-bar-height))`"
		ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :up="{ toTop: { bottom: 200 } }">
			<!-- 橱窗图 -->
			<view class="top-container">
				<u-swiper :list="bannerList" mode="none" height="750"></u-swiper>
				<view class="top-footer flex-center-between">
					<view>
						<view v-if="goodsTimeObj.textKey" class="flex-center">
							<view class="u-m-r-10 font-medio">{{ lang_goods[goodsTimeObj.textKey] }}:</view>
						
							<x-counttime :time="dataInfo[goodsTimeObj.timeKey]"></x-counttime>
						</view>
					</view>

					<view class="font-medio clear-flex">{{ lang_goods.hasGoods[0] }}{{ hasCount }}{{ lang_goods.hasGoods[1] }}</view>
				</view>
			</view>

			<!-- 简介 -->
			<view style="padding: 16rpx 34rpx 28rpx;">
				<view class="flex-center-between">
					<view class="flex-baseline">
						<view style="color: #FC2642;" class="flex-baseline u-f-44 u-lh-52 font-medio">
							<view>{{ lang_unit.money }}</view>
							<view class="u-f-72">{{ parseInt(currentPrice.discountPrice || 0) }}.</view>
							<view>{{ (currentPrice.discountPrice || 0).toFixed(2).slice(-2) }}</view>
						</view>
						<!-- <view class="u-m-l-12 t-line color-grew">{{ lang_unit.money }}{{ dataInfo.price || 0 }}</view> -->
					</view>

					<view class="flex-center u-text-center u-f-24 u-lh-34">
						<view @click="shareVisible = true">
							<image src="@/static/image/common/share.png" style="width: 36rpx; height: 36rpx;"></image>
							<view>{{ lang_common.share }}</view>
						</view>
						<view class="u-m-l-52" @click="collectAction(!dataInfo.hasCollected)">
							<u-icon :name="'star' + (dataInfo.hasCollected ? '-active' : '')" custom-prefix="u"
								size="36" :color="dataInfo.hasCollected ? '#FC2642' : '#333333'"></u-icon>
							<view :class="['u-p-t-6', dataInfo.hasCollected ? 'color-red' : '']">
								{{ lang_common.collect }}</view>
						</view>
					</view>
				</view>
				
				<view v-if="dataInfo.allowIntegral" class="u-p-t-8 u-f-32 u-lh-44">{{ lang_common.justPayScore[0] }}<text class="font-bold">{{ currentPrice.integral || 0 }}</text>{{ lang_common.justPayScore[1] }}</view>
				
				<view class="u-p-t-18 u-f-36 u-lh-50 font-medio linecamp-3">{{ dataInfo.title || '' }}</view>

				<view class="flex-center u-p-t-18 color-grew">
					<view class="flex-center">
						<view>{{ lang_goods.salesVolume }}:</view>
						<view>{{ (dataInfo.fakeSellCount || 0) + (dataInfo.sellCount || 0) }}</view>
					</view>
					<view v-if="![5, 6, 7].includes(goodsType)" class="flex-center u-m-l-40">
						<view>{{ lang_goods.postage }}:</view>
						<view>{{ lang_goods[dataInfo.isFreeFreight ? 'freeShip' : 'unFreeShip'] }}</view>
					</view>
				</view>
			</view>

			<!-- 分割线 -->
			<u-gap height="4" bgColor="rgba(0,0,0,0.02)"></u-gap>
	
			<view v-if="[5, 7].includes(goodsType)" style="padding: 24rpx 34rpx;">
				<view class="flex-center-between">
					<view class="u-f-36 u-lh-50 font-medio">{{ lang_goods.paramDetail }}</view>
				</view>
				
				<view class="u-p-t-18 color-grew">
					<view>{{ lang_goods.discount }}：{{ lang_goods.maxReduce[0] }}{{ dataInfo.couponMax }}{{ lang_goods.maxReduce[1] }}{{ dataInfo.couponVal }}</view>
					<!-- <view>{{ lang_goods.startUseTime }}：{{ dataInfo.startTime }}</view> -->
					<view>{{ lang_goods.endUseTime }}：{{ dataInfo.endTime }}</view>
					<view>{{ lang_goods.useRange }}：
						<template v-if="dataInfo.merchantId">{{ lang_goods.onlyBuyTips[0] }}<text class="color-red" @click="jumpUrl(`/pages/user/comerciante/detail/detail?merchantId=${ dataInfo.merchantId }`)">{{ dataInfo.merchantName }}</text>{{ lang_goods.onlyBuyTips[1] }}</template>
						<text v-else class="color-red" @click="toUserShop">Dondego平台商城所有商家</text>
					</view>
				</view>
			</view>

			<template v-if="[4].includes(goodsType) && dataInfo.pinCount">
				<view>
					<view class="flex-center-between" style="padding: 30rpx 38rpx;">
						<view class="u-f-28 u-lh-40 font-bold">{{ dataInfo.pinCount || 0 }}{{ lang_goods.collageListTips }}</view>
						<x-see-more v-if="dataInfo.pinCount"
							@click="jumpUrl(`/pages/user/shop/collage/list?goodsId=${ goodsId }`)"></x-see-more>
					</view>

					<view>
						<view v-for="(item, index) in dataInfo.pinList || []" :key="index">
							<collage-card :item="item" @change="changeCollage"></collage-card>
						</view>
					</view>
				</view>

				<!-- 分割线 -->
				<u-gap height="4" bgColor="rgba(0,0,0,0.02)"></u-gap>
			</template>

			<!-- 查看评价 -->
			<view style="padding: 24rpx 34rpx;">
				<view class="flex-center-between">
					<view class="u-f-36 u-lh-50 font-medio">{{ lang_goods.watchEvaluate }}</view>
					<x-see-more v-if="commentList.length" @click="jumpUrl(`/pages/user/shop/comment/comment?goodsId=${ goodsId }`)"></x-see-more>
				</view>

				<view>
					<view v-for="(item, index) in commentList">
						<evaluate-item :item="item">
							<view slot="footer">
								<view>{{ item.bodyTitle }}</view>
							</view>
						</evaluate-item>
					</view>
				</view>
				<mescroll-empty v-if="!commentList.length"></mescroll-empty>
			</view>

			<!-- 商品详情-富文本 -->
			<view>
				<view style="padding: 0 34rpx 34rpx;" class="u-f-34 u-lh-48 font-medio">{{ lang_goods.goodsDetail }}</view>
				<x-parse :content="dataInfo.content || ''" style="white-space:pre-wrap;"/>
				<!-- <view class="u-f-32 u-lh-44 u-m-t-24">
					<view v-html="dataInfo.content || ''" style="white-space:pre-wrap;"></view>
				</view> -->
				<mescroll-empty v-if="!dataInfo.content"></mescroll-empty>
			</view>
		</mescroll-body>

		<!-- 底部操作栏 -->
		<x-fixed-bottom>
			<view class="flex-center-between u-p-28">
				<view class="flex-center">
					<view class="u-text-center" @click="changeCallAction">
						<image src="@/static/image/order/contact_black.png" style="width: 48rpx; height: 48rpx;"
							class="clear-flex"></image>
						<view class="u-m-t-10 u-f-20 u-lh-26 color-grew">{{ lang_common.contacter }}</view>
					</view>

					<view class="u-m-l-46 u-text-center" @click="jumpUrl('/pages/user/shop/cart/cart')">
						<view style="position: relative;">
							<image src="@/static/image/common/shop_cart_black.png" style="width: 48rpx; height: 48rpx;"
								class="clear-flex"></image>
							<view v-if="cartCount" class="shop-cart-dot">{{ cartCount }}</view>
						</view>
						<view class="u-m-t-10 u-f-20 u-lh-26 color-grew">{{ lang_personal.shopCart }}</view>
					</view>
				</view>

				<view v-if="[4].includes(goodsType)">
					<view @tap.stop>
						<x-common-btn width="440" @click="showShopClass('ready')" :disabled="!dataInfo.stock">
							<view class="u-f-30 u-lh-42 font-medio">{{ lang_goods.startCollage }}</view>
						</x-common-btn>
					</view>
				</view>
				
				<view v-else-if="[2, 3].includes(goodsType)">
					<view @tap.stop>
						<x-common-btn width="440" @click="showShopClass('ready')" :disabled="!dataInfo.stock">
							<view class="u-f-30 u-lh-42 font-medio">{{ lang_goods.buyNow }}</view>
						</x-common-btn>
					</view>
				</view>
				
				<view v-else-if="[5, 7].includes(goodsType)">
					<view @tap.stop>
						<x-common-btn width="440" @click="buyCouponAction()" :disabled="!dataInfo.stock">
							<view class="u-f-30 u-lh-42 font-medio">{{ lang_goods.buyNow }}</view>
						</x-common-btn>
					</view>
				</view>

				<view v-else-if="typeof goodsType === 'number'" class="flex-center font-medio u-f-28 u-lh-40">
					<view class="u-m-r-20" @tap.stop>
						<x-common-btn width="220" background="#010101" @click="showShopClass('cart')" :disabled="!dataInfo.stock">
							<view class="u-f-30 u-lh-42 font-medio">{{ lang_goods.addShopCart }}</view>
						</x-common-btn>
					</view>

					<view @tap.stop>
						<x-common-btn width="220" @click="showShopClass('ready')" :disabled="!disabledReady">
							<view class="u-f-30 u-lh-42 font-medio">{{ lang_goods.buyNow }}</view>
						</x-common-btn>
					</view>
				</view>
			</view>
		</x-fixed-bottom>

		<!-- 规格弹窗 -->
		<shop-class-popup v-model="shopClassVisible" :type="shopClassType" :goods-id="goodsId" @change="shopClassChange"></shop-class-popup>

		<!-- 拼团弹窗 -->
		<collage-popup v-model="collageVisible" :obj="collageObj" @click="shareVisible = true"></collage-popup>

		<!-- 分享弹窗 -->
		<x-share v-model="shareVisible"></x-share>
		
		<permission-unAuthTips v-model="settingValue"></permission-unAuthTips>
	</view>
</template>

<script>
	import {
		goodsInfo
	} from '@/api/user/goods.js'
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";

	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				shopClassVisible: false,
				shopClassType: 'ready',

				collageVisible: false,

				shareVisible: false,

				dataInfo: {},
				collageList: [],
				shopClassObj: {},

				goodsId: '',
				collageObj: '',
				
				settingValue: ''
			}
		},
		computed: {
			goodsTimeObj() {
				let { goodsType, startTime, endTime } = this.dataInfo
				if (![2, 3, 4].includes(goodsType)) {
					return ({})
				}
				let dv = t => this.dayjs(t || this.dayjs()).valueOf()
				if (startTime && dv() < dv(startTime)) {
					return ({ textKey: 'startDistance', timeKey: 'startTime' })
				} else if (dv() > dv(startTime) && dv(endTime) > dv()) {
					return ({ textKey: 'endDistance', timeKey: 'endTime' })
				} else {
					return ({})
				}
			},
			disabledReady() {
				let { stock, goodsType, startTime,  } = this.dataInfo
				if (goodsType === 2 && startTime) {
					return this.dayjs().valueOf() > this.dayjs(startTime).valueOf() && !!stock
				}
				return stock
			},
			goodsType() {
				return this.dataInfo.goodsType || ''
			},
			bannerList() {
				return this.dealImage(this.dataInfo.imgUrls).map(item => ({ ...item, image: this.baseUrl + item.fileUrl }))
			},
			commentList() {
				return this.dataInfo.commentList || []
			},
			hasCount() {
				let {
					stock
				} = this.dataInfo
				return (stock || 0)
			},
			currentPrice() {
				return typeof this.shopClassObj.discountPrice === 'number' ? this.shopClassObj : this.dataInfo
			}
		},
		onBackPress() {
			if (this.collageVisible && this.shareVisible) {
				this.shareVisible = false
				return true
			}
			let list = ['shopClassVisible', 'collageVisible', 'shareVisible']
			if (list.find(item => this[item])) {
				list.map(item => (this[item] = false))
				return true
			}
			return false
		},
		onShow() {
			if (this.goodsId) {
				this.downCallback()
			}
		},
		onLoad({
			goodsId
		}) {
			console.log(this.bannerList)
			this.goodsId = goodsId
			this.downCallback()
		},
		methods: {
			async changeCallAction() {
				this.settingValue = await this.callAction(this.contactPhone)
			},
			// 触发收藏
			async collectAction() {
				let result = await this.actionAction(4, this.dataInfo)
				result && (this.downCallback())
			},
			// 触发购买优惠券
			buyCouponAction() {
				uni.navigateTo({
					url: `/pages/user/order/ready/ready`,
					success: res => {
						let item = this.dataInfo
						res.eventChannel.emit('order-ready', ({ type: 'coupon', list: [{ ...item, amount: item.stock ? 1 : 0, discountPrice: item.discountPrice|| 0 }] }))
					}
				})
			},
			// 触发规格选择
			shopClassChange(e) {
				console.log(e)
				this.shopClassObj = {...e}
			},
			// 回退到平台商城
			toUserShop() {
				uni.switchTab({
					url: `/pages/tabbar/user/shop/shop`
				})
			},
			// 显示商品参数弹窗
			showShopClass(type) {
				this.shopClassVisible = true
				this.shopClassType = type
			},
			// 显示拼团信息
			changeCollage(item, index) {
				this.collageObj = item
				this.collageVisible = true
			},
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			upCallback(page) {
				let node = this.$refs['mescrollRef']
				node && node.mescroll.endSuccess(10);
				if (!this.goodsId || page.num > 1) return
			
				goodsInfo({
					goodsId: this.goodsId
				}).then(res => {
					this.dataInfo = res
				}).catch(() => {
					node && node.mescroll.endErr();
				})
			},
			downCallback() {
				let node = this.$refs['mescrollRef']
				node && node.mescroll.resetUpScroll()
			},
		}
	}
</script>

<style scoped lang="scss">
	.container /deep/ .u-drawer-bottom,
	.container /deep/ .u-mode-center-box {
		background: transparent
	}

	.top {
		&-container {
			position: relative;
			top: 0;
			left: 0;
			width: 750rpx;
			height: 750rpx;
			background-color: #f9f9f9;
		}

		&-bg {
			width: 750rpx;
			height: 750rpx;
		}

		&-footer {
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			padding: 26rpx 34rpx;
			color: #FFFFFF;
			background-color: rgba(0, 0, 0, .5);
		}
	}

	.img-container {
		width: 120rpx;
		height: 120rpx;
		border-radius: 22rpx;
		background-color: #f9f9f9;
	}
	
	.shop-cart-dot {
		position: absolute;
		top: -10rpx;
		right: -20rpx;
		width: 32rpx;
		height: 32rpx;
		font-size: 20rpx;
		color: #ffffff;
		background-color: #FC2642;
		border: 2rpx solid #ffffff;
		border-radius: 32rpx;
		overflow: hidden;
	}
</style>
